<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script>
			function genpoints(segs, defaultHeight) {
				var points = new Array(segs+1);
				for (i=0; i < points.length; i++) {
					points[i] = defaultHeight;
					
				}
				return points;
			}
			function midpoint(startPt, endPt, points, maxRange, minRange, roughness) {
				if (endPt - startPt > 1) {
					var midpointIndex = Math.round(startPt+(endPt-startPt)/2);
					var displacement = Math.floor(Math.random() * (maxRange - minRange + 1)) + minRange;
					points[midpointIndex] = (points[startPt] + points[endPt])/2 +displacement;
					console.log(points[midpointIndex])
					midpoint(startPt, midpointIndex, points, maxRange*roughness, minRange*roughness, roughness);
					midpoint(midpointIndex, endPt, points, maxRange*roughness, minRange*roughness, roughness);
				}
			}
			
			
			//function called as soon as the body loaded
			var draw = function(){
				var segs = 128;
				//get the canvas + context variables
				var canvas = document.getElementById('test');  
				var context = canvas.getContext('2d');
				context.fillStyle = "#ffffff;"
				context.lineWidth = 1;
				//get a position to start with and declare a couple of useful variables
				var defaultHeight = 240;
				points = genpoints(segs, defaultHeight)
				midpoint(0, 128, points, 200, -200, 0.5)
				//start on the left and begin path
				context.beginPath();
				context.moveTo(0, 480);
				for (i=0; i  	< points.length; i++) {
					context.lineTo(640/segs*i,points[i]);
		
				}
				context.lineTo(640,480);
				context.closePath();
				context.fill();
				
				
			
			}
			window.onload = function() {
				draw()
			}
		</script>
	</head>
	<body>
		<div>
		<p>Random terrain</p>
		<canvas id="test" width="640"height="480" style="border: 1px solid black"></canvas>
		</div>
	</body>

</html>